<template>
  <div class="likeSongList">
    <!-- 歌曲列表 -->
    <div class="songsList" v-if="songsList.length !== 0" ref="songsListRef">
      <div class="songsList_item title">
        <div class="songsList_item_index"></div>
        <div class="songsList_item_info">歌曲</div>
        <div class="songsList_item_author">作者</div>
        <div class="songsList_item_dt">时长</div>
      </div>
      <div
        class="songsList_item"
        v-for="(item, index) in songsList"
        :key="item.id"
      >
        <div class="songsList_item_index">{{ index + 1 }}</div>
        <div class="songsList_item_info">
          <GlobalImageDeep
            :imgWidth="70"
            :imgHeight="70"
            :url="item.al.picUrl"
          />
          <p
            class="songsList_item_info_name"
            @click="toSongDetailsPage(item.id)"
          >
            {{ item.name }}
          </p>
          <div class="songsList_item_info_bt">
            <div>
              <i class="iconfont icon-bofang"></i>
            </div>
            <div>
              <i class="iconfont icon-tianjiawenjian"></i>
            </div>
            <!-- 由 喜欢此歌曲，调整成 不喜欢此歌曲 -->
            <div>
              <i
                class="iconfont icon-shanchu"
                @click="dislikeSong(item.id)"
              ></i>
            </div>
          </div>
        </div>
        <div class="songsList_item_author one_txt_cut">
          <!-- {{ formatName(item.ar) }} -->
          <span
            v-for="item_m in item.ar"
            :key="item_m.id"
            @click="toSingerDetailsPage(item_m.id)"
            >{{ item_m.name }}
          </span>
        </div>
        <div class="songsList_item_dt">{{ formatMS(item.dt) }}</div>
      </div>
    </div>
    <el-row v-else type="flex" justify="center">
      <img
        src="../../../../assets/images/loading.3708220b.gif"
        alt=""
        height="200"
        width="200"
      />
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
import { mapState, mapMutations, mapActions } from "vuex";
import {
  getSongDetails,
  getUserAlbum,
  addOrDelPlaylistSong,
} from "../../../../api/myMusicApi";
export default {
  name: "likeSongList",
  components: {},
  props: {
    songsIdsList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {
      songsList: [],
      userLikeSongsAlbumId: 0,
    };
  },
  async created() {
    await this.getSongsDetailMethod();
    await this.getUserAlbumMethod();
  },
  watch: {
    songsIdsList: {
      handler(newValue) {
        console.log("子组件监听到了变化");
        this.getSongsDetailMethod();
      },
      deep: true,
    },
  },
  methods: {
    // 获取用户 喜欢的音乐  列表 的详细信息
    async getSongsDetailMethod() {
      let songsDeatilResult = await getSongDetails(this.songsIdsList.join(","));
      if (songsDeatilResult.code === 200) {
        this.songsList = songsDeatilResult.songs;
      }
    },
    // 获取 用户的所有 歌单
    async getUserAlbumMethod() {
      let result = await getUserAlbum(this.userStoreProfile.userId);
      if (result.code === 200) {
        this.userLikeSongsAlbumId = result.playlist[0].id;
      }
    },
    // 删除某个歌曲
    /* 删除喜欢 音乐的某个歌曲思路 ，
      1. 用户登录后，打开 喜欢 nav 界面后，通过用户 uid，调 “获取用户歌单” 接口，返回的的歌单数组中，第一个就是 xxxx用户喜欢的音乐  歌单
      2. 通过 调用 “歌单添加或 删除歌曲” 完成 用户 取消喜欢xx 音乐， 或者 添加 喜欢 xxxx 音乐
    */
    async dislikeSong(id) {
      let result = await addOrDelPlaylistSong({
        op: "del",
        pid: this.userLikeSongsAlbumId,
        tracks: id,
      });
      if (result.status === 200) {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.$emit("refreshUserLikeSongAlbum");
      }
    },
    // 格式化时间
    formatDate(time) {
      return moment(time).format("MM月DD日");
    },
    formatMS(dt) {
      return moment(dt).format("mm:ss");
    },
    formatName(names) {
      let str = "";
      names.forEach((item) => {
        str = str + item.name + "/";
      });
      str = str.slice(0, str.length - 1);
      return str;
    },
    toSongDetailsPage(id) {
      this.$router.push(`/songDetails/${id}`);
    },
    toSingerDetailsPage(id) {
      this.$router.push(`/singerDetails/${id}`);
    },
  },
  computed: {
    ...mapState({
      userStoreProfile: (state) => state.userStore.profile,
      userStoreCookie: (state) => state.userStore.cookie,
      userStoreToken: (state) => state.userStore.token,
      userStoreUserDetail: (state) => state.userStore.userDetail,
    }),
  },
};
</script>

<style lang="less" scoped>
.likeSongList {
  // 歌曲列表
  .songsList {
    padding: 20px 0;
    font-size: 14px;
    .title {
      color: #999;
      height: 50px !important;
    }
    .songsList_item {
      display: flex;
      align-items: center;
      height: 80px;
      // background-color: red;
      &:hover {
        .songsList_item_info_bt {
          opacity: 1 !important;
        }
      }
      .songsList_item_index {
        width: 40px;
        text-align: center;
      }
      .songsList_item_author {
        width: 200px;
        padding-right: 20px;
        // background-color: green;
        span {
          margin-right: 5px;
          cursor: pointer;
          &:hover {
            color: @globalColor;
          }
        }
      }
      .songsList_item_dt {
        width: 50px;
        // background-color: #fff;
      }
      .songsList_item_info {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1;
        padding-right: 20px;
        p {
          margin-left: 10px;
        }
        /deep/ .el-image img {
          border-radius: 8px;
        }
        .songsList_item_info_name {
          cursor: pointer;
          &:hover {
            color: @globalColor;
          }
        }
        .songsList_item_info_bt {
          display: flex;
          opacity: 0;
          position: absolute;
          right: 20px;
          > div {
            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: #999999;
            &:hover {
              border: 1px solid @globalColor;
              color: @globalColor;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
